import React, { Component } from "react";
import BScroll from "@better-scroll/core";
import Pullup from "@better-scroll/pull-up";
import "./index.scss";
BScroll.use(Pullup);

/**下拉刷新 */
class Page extends Component {
	constructor(props) {
		super(props);
		this.scrollRef = React.createRef();
		this.state = {};
	}
	componentDidMount() {
		this.props.onRef(this);
		const { pullUp } = this.props;
		this.bs = new BScroll(this.scrollRef.current, {
			scrollY: true,
			pullUpLoad: {
				threshold: -20 // 当上拉距离超过50px时触发 pullingUp 事件
			}
		});
		this.bs.on("pullingUp", () => this.pullingUpHandler(pullUp));
	}
	pullingUpHandler(pullUp) {
		pullUp();
	}
	parentRefresh = () => {
		console.log("加载完毕！，刷新Scroll");
		setTimeout(() => {
			this.bs.finishPullUp();
			this.bs.refresh();
		}, 300);
	};
	render() {
		let propsStyle = this.props.style || {};
		let style = {
			position: "absolute",
			top: "1.88rem",
			left: "0",
			bottom: "1rem",
			width: "100%",
			...propsStyle,
			zIndex: 11
		};

		return (
			<div ref={this.scrollRef} className="scroll-box" style={style}>
				<div id="scoll-element">
					{this.props.children}
					{this.props.hasMore ? (
						<div className="pull-up">上拉加载更多...</div>
					) : (
						<div className="pull-up">没有更多了</div>
					)}
				</div>
			</div>
		);
	}
}

export default Page;
